<template>
	<cusNavVue :title="toUserInfo.name"></cusNavVue>
	<view class="page-content">
		<view :class="['list-item', item.fromId===meId?'right': '']" v-for="item in messageList">
			<image class="user-avatar" v-if="item.fromId !== meId" :src="toUserInfo.avatar" mode=""></image>
			<rich-text :nodes="item.message"></rich-text>
			<image class="user-avatar" v-if="item.fromId === meId" :src="meInfo.avatar" mode=""></image>
		</view>
	</view>
	<view class="send-model">
		<view class="input-model">
			<up-input v-model="messageValue" placeholder="请输入内容" border="surround" clearable></up-input>
			<button type="primary" size="mini" @click="doSend">发送</button>
			<up-icon name="chat" color="#2979ff" size="28" @click="handleIcon"></up-icon>
			<up-icon name="photo" color="#2979ff" size="28" @click="handleImg"></up-icon>
			<!-- <up-button type="primary" size="mini" text="发送"></up-button> -->
		</view>
		<view class="icon-list" v-show="showIcon">
			<image style="width: 40rpx;height: 40rpx" :src="item.url" @click="selectedIcon(item)" v-for="item in iconList" mode=""></image>
		</view>
	</view>
</template>

<script setup>
	import cusNavVue from '../../components/cus-nav/cus-nav.vue';
	import io from '@hyoga/uni-socket.io';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	const showIcon = ref(false)
	const iconList = ref([
		{url: '/static/icon/bs.png', code: '/bs'},
		{url: '/static/icon/cj.png', code: '/cj'},
		{url: '/static/icon/eye.png', code: '/eye'},
		{url: '/static/icon/sq.png', code: '/sq'},
		{url: '/static/icon/yg.png', code: '/yg'},
	])
	const handleIcon = () => {
		showIcon.value = !showIcon.value
	}
	const selectedIcon = (icon) => {
		messageValue.value += icon.code
	}
	
	const handleImg = () => {
		uni.chooseImage({
			success(res) {
				// 上传文件
				setTimeout(() => {
					const url = 'http://gips0.baidu.com/it/u=3822353666,2757632348&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280'
					const messageObj = {
						fromId: meId.value,
						toId: toId.value,
						message: `<img src="${url}" style="width: 100px;height: auto;">`
					}
					messageList.value.push(messageObj)
					socket.emit('sendMsg', messageObj)
				}, 2000)
			}
		})
	}
	const toUserInfo = ref({
		name: '',
		avatar: ''
	})
	const meInfo = ref({
		name: '',
		avatar: ''
	})
	const messageValue = ref('')
	let timer = null
	const doHeart = () => {
		timer && clearInterval(timer) 
		timer = setInterval(() => {
			socket.emit('ping')
		}, 20000)
	}
	let socket = null
	const linkSocket = () => {
		socket = io('http://localhost:3000', {
			path: '/mysocket',
			query: {
				id: meId.value
			},
			transports: ['websocket', 'polling'],
			timeout: 5000,
		})
		socket.on('connect', () => {
			console.log('客户端链接成功')
			socket.on('reciveMsg', (info) => {
				messageList.value.push(info)
			})
			doHeart()
			socket.on('pang', () => {
				console.log('心跳检测完成')
			})
			// socket.emit()
		})
		// socket.on('disconnect', () => {
		// 	linkSocket()
		// })
	}
	const messageList = ref([])
	const toId = ref('')
	const meId = ref('')
	const getUserInfo = () => {
		uniCloud.callFunction({
			name: 'getPersonDetail',
			data: {
				id: toId.value
			},
			success(res) {
				console.log(res)
				toUserInfo.value = res.result[0]
			}
		})
		uniCloud.callFunction({
			name: 'getPersonDetail',
			data: {
				id: meId.value
			},
			success(res) {
				console.log(res)
				meInfo.value = res.result[0]
			}
		})
	}
	onLoad((options) => {
		toId.value = options.toId
		meId.value = options.meId
		getUserInfo()
		linkSocket()
	})
	
	const codeToImgStr = (str) => {
		let newStr = str
		iconList.value.forEach(item => {
			newStr = newStr.replaceAll(item.code, `<img src="${item.url}" style="width: 40px;height:40px">`)
		})
		return newStr
	}
	
	const doSend = () => {
		const messageObj = {
			fromId: meId.value,
			toId: toId.value,
			message: codeToImgStr(messageValue.value)
		}
		messageList.value.push(messageObj)
		socket.emit('sendMsg', messageObj)
	}
</script>

<style lang="scss" scoped>
	.page-content {
		padding-top: 88rpx;
	}

	.list-item {
		display: flex;
		align-items: flex-start;
		margin: 20rpx 0;

		.user-avatar {
			width: 50rpx;
			height: 50rpx;
		}

		&.right {
			justify-content: flex-end;
		}
	}

	.send-model {
		position: fixed;
		bottom: 0;
		width: 100vw;
	}

	.input-model {
		display: flex;
	}
</style>